<template>
  <!-- 用户编辑页面 -->
  <el-main>
    <!--      面包屑        -->
    <!-- <el-card class="box-card">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a href="/">promotion management</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card> -->
    <!--        列表功能      -->
    <el-form :model="form" label-width="120px" :label-position="'top'">
      <el-row :gutter="15">
        <el-col :xs="24" :sm="15" :md="16" :lg="18" :xl="18">
          <el-card class="form-submit-card">
            <template #header>
              <div class="card-header">
                <span>基础信息</span>
              </div>
            </template>
            <el-row :gutter="15">
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="用户名">
                  <el-input v-model="form.name" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="昵称">
                  <el-input v-model="form.ming" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="邮箱">
                  <el-input v-model="form.email" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="手机号">
                  <el-input v-model="form.phone" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="密码">
                  <el-input v-model="form.password" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="确认密码">
                  <el-input v-model="form.c_password" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card class="form-submit-card">
            <template #header>
              <div class="card-header">
                <span>权限信息</span>
              </div>
            </template>
            <el-row :gutter="15">
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="部门">
                  <el-select
                    v-model="form.department_id"
                    placeholder="please select your zone"
                    style="width: 100%"
                  >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="角色">
                  <el-select
                    v-model="form.role_id"
                    placeholder="please select your zone"
                    style="width: 100%"
                  >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="职位">
                  <el-select
                    v-model="form.position"
                    placeholder="please select your zone"
                    style="width: 100%"
                  >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="医院">
                  <el-select
                    v-model="form.hospital"
                    placeholder="please select your zone"
                    style="width: 100%"
                  >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="是否禁用">
                  <el-switch
                    v-model="form.status"
                    inline-prompt
                    active-text="开启"
                    inactive-text="禁用"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="9" :md="8" :lg="6" :xl="6">
          <el-card style="padding-bottom: 30px" class="form-submit-card">
            <template #header>
              <div class="card-header">
                <span>头像上传</span>
              </div>
            </template>
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="headers"
              :data="body"
              action="http://203.34.49.13:8000/api//upload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="15" :md="16" :lg="18" :xl="18">
          <el-card class="form-submit-card">
            <el-form-item style="margin-bottom: 0">
              <el-button type="primary" @click="onSubmit">确定</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </el-main>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

import { ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import { Cookies } from "../../../request/cookie";
import { addNewUser } from "../../../request/api";
// do not use same name with ref
const form = reactive({
  name: "",
  ming: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
  phone: "",
  email: "",
  password: "",
  c_password: "",
  role_id: "",
  department_id: "",
  position: "",
  status: null,
  hospital: "",
});

const onSubmit = () => {
  console.log("submit!", form);
  addNewUser(form).then((res) => {
    console.log(res);
    if (res.code === 200) {
      // TODO: 跳到users
    } else {
      // 报错处理
    }
  });
};

const value1 = ref(true);

//头像上传
const imageUrl = ref("");

const headers = reactive({
  Authorization: Cookies.get("yimei_login"),
});

const body = reactive({
  file: {},
  folder: "avata",
  type: "",
});
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(uploadFile);
  console.log(uploadFile.raw!);
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  console.log(rawFile);
  //uploadPicture
  const fileType = ["image/jpeg", "image/png", "iamge/jpg"];
  if (!fileType.includes(rawFile.type)) {
    ElMessage.error("上传格式为jpeg、jpg、png");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 1) {
    ElMessage.error("上传图片大小不能超过1MB!");
    return false;
  }
  body.file = rawFile;
  body.type = rawFile.type;

  return true;
};
</script>

<style scoped>
.box-card {
  margin-bottom: 15px;
}

/*头像上传*/
.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 178px;
  margin: 0 auto;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.form-submit-card {
  margin-bottom: 15px;
}
/*主体内容样式 end*/
</style>
